<template>
  <div class="plateBill-div">
    <div>
      <p>请选择要查询的车牌：</p>
      <div style="margin-top: 30px;">
        <el-radio-group v-model="radio1" style="margin-left: 300px;margin-top: -110px;">
          <el-radio-button label="第一车牌号码"></el-radio-button>
          <el-radio-button label="第二车牌号码"></el-radio-button>
          <el-radio-button label="第三车牌号码"></el-radio-button>
        </el-radio-group>
      </div>

      <div class="body-table">
        <el-table
          :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
          stripe
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="userAccount"
            label="通行证"
            width="180">
          </el-table-column>
          <el-table-column
            prop="plateNumber"
            label="消费车牌号码">
          </el-table-column>
          <el-table-column
            prop="billType"
            label="账单类型">
          </el-table-column>
          <el-table-column
            prop="billAmount"
            label="账单总额">
          </el-table-column>
          <el-table-column
            prop="userBalance"
            label="余额">
          </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="tableData.length" :page-size="pagesize"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        style="position: absolute;top: 800px;left: 650px;"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio1:'第一车牌号码',
      plate:'',
      plateNumber1 : '',
      plateNumber2 : '',
      plateNumber3 : '',

      tableData :[],

      currentPage: 1, //初始页和当前页码数
      pagesize: 13, //每页的数据上限
    }
  },

  methods: {
    handleCurrentChange(val) {
        this.currentPage = val;
      }
  },

  watch:{
     radio1(newName) {
      switch(newName){
        case '第一车牌号码':
          this.plate = this.plateNumber1
          break
        case '第二车牌号码':
          this.plate = this.plateNumber2
          break
        case '第三车牌号码':
          this.plate = this.plateNumber3
          break
      }

      const res = this.$http.post('user/queryByPlate',{
        userAccount : window.sessionStorage.getItem('userAccount'),
        plateNumber : this.plate
      })

      res.then((result)=>{
        let temp = result.data 
        let i = 0
        temp.forEach(function(e){  
          temp[i].date = temp[i].billYear +'-'+ temp[i].billMouth +'-' +temp[i].billDay

          switch(temp[i].billType){
            case 'bigWallet_recharge' :
              temp[i].billType = '账户充值'
              break
            case 'bigWallet_refund' :
              temp[i].billType = '账户消费'
              break
            case 'smallWallet_recharge' :
              temp[i].billType = '车牌充值'
              break
            case 'smallWallet_refund' :
              temp[i].billType = '车牌消费'
              break
          }

          if(temp[i].userPlateNumber != -1){
            temp[i].isPlate = 'Y'
            temp[i].plateNumber = temp[i].userPlateNumber
          }else{
            temp[i].isPlate = 'N'
            temp[i].plateNumber = 'null'
          }

          i++  
        });
        this.tableData = temp
      })
    }
  },

  created:async function(){
    const res = await this.$http.post('user/userPlateBalance',{
      userAccount : window.sessionStorage.getItem('userAccount'),
    })

    this.plateNumber1 = res.data.plateNumber1
    this.plateNumber2 = res.data.plateNumber2
    this.plateNumber3 = res.data.plateNumber3

    this.plate = this.plateNumber1

    switch(this.radio1){
        case '第一车牌号码':
          this.plate = this.plateNumber1
          break
        case '第二车牌号码':
          this.plate = this.plateNumber2
          break
        case '第三车牌号码':
          this.plate = this.plateNumber3
          break
      }

      const res2 = this.$http.post('user/queryByPlate',{
        userAccount : window.sessionStorage.getItem('userAccount'),
        plateNumber : this.plate
      })

      res2.then((result)=>{
        let temp = result.data 
        let i = 0
        temp.forEach(function(e){  
          temp[i].date = temp[i].billYear +'-'+ temp[i].billMouth +'-' +temp[i].billDay

          switch(temp[i].billType){
            case 'bigWallet_recharge' :
              temp[i].billType = '账户充值'
              break
            case 'bigWallet_refund' :
              temp[i].billType = '账户消费'
              break
            case 'smallWallet_recharge' :
              temp[i].billType = '车牌充值'
              break
            case 'smallWallet_refund' :
              temp[i].billType = '车牌消费'
              break
          }

          if(temp[i].userPlateNumber != -1){
            temp[i].isPlate = 'Y'
            temp[i].plateNumber = temp[i].userPlateNumber
          }else{
            temp[i].isPlate = 'N'
            temp[i].plateNumber = 'null'
          }

          i++  
        });
        this.tableData = temp
      })
  },
  
}
</script>

<style>
.plateBill-div{
    width: 90%;
    height: 90%;

    margin-left: 50px;
    margin-top: 50px;

    background-color: white;

    opacity: 1;
    border-radius : 20px;
}
.plateBill-div>div>p{
  font-size: 20px;
  margin-top: 50px;
  padding-top: 50px;
  padding-left: 50px;
}
</style>